<script setup lang="ts">
import * as ConfigApi from '@/api/infra/config'
import ThemeGrid from "./component/ThemeGrid.vue";
import ThemeTool from "./component/ThemeTool.vue";
import {ThemeApi, ThemeVO} from "@/api/pb/theme";
import {InitialThemeIdConfigKey} from "@/types/web3d";

const loading = ref(false)
provide('loading', loading)

/** 网格初始化边长 **/
const defaultColSize = 36
const defaultRowSize = 20
/** 列与行数 **/
const layoutColSize = ref(defaultColSize)
provide('layoutColSize', layoutColSize)
const layoutRowSize = ref(defaultRowSize)
provide('layoutRowSize', layoutRowSize)

/** 网格数据 **/
const themeList = ref<ThemeVO[]>([])
provide('themeList', themeList)


/** 获取数据 **/
const getList = async () => {
  const data = await ThemeApi.getThemeList()
  data.forEach(item => {
    item.grid.static = true
  })
  themeList.value = data
}
provide('getList', getList)

/**
 * 获取初始房间id
 */
const initialThemeId = ref<string | null>(null)
provide('initialThemeId', initialThemeId)
const getInitialThemeId = async () => {
  initialThemeId.value = (await ConfigApi.getConfigDataKey(InitialThemeIdConfigKey)).value

  for(const theme of themeList.value) {
    if(theme.id === Number(initialThemeId.value)) {
      return
    }
  }
  initialThemeId.value = null
}

onBeforeMount(async () => {
  loading.value = true

  await getList()
  await getInitialThemeId()
})

onMounted(() => {
  loading.value = false
})

</script>

<template>
  <el-row v-loading="loading" :gutter="20">
    <el-col :span="20">
      <ContentWrap>
        <ThemeGrid />
      </ContentWrap>
    </el-col>

    <el-col :span="4">
      <ContentWrap class="h-full">
        <ThemeTool />
      </ContentWrap>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">

</style>
